<template>
	<view class="page">
		<view class="h30"></view>
		<view class="block">
					<view class="chart-box">
						<view class="name-time">
							<view class="name">{{trainName}}</view>
							<view class="time">{{trainTime}}</view>
						</view>
						<view class="congratulation" v-if="trainNum">
							<view class="congratulation-text">恭喜！这是您完成的第{{trainNum}}次练习</view>
						</view>
						<view v-else style="height: 15px;"></view>
						<view id="chart" v-if="showIndex">
							<l-echart ref="chart"></l-echart>
						</view>
						<view class="no-data" v-else>暂无数据</view>
					</view>
					<view class="time-box">
						<view class="meditation-time" style="padding: 20px 16px;align-items: center;">
							<view class="time-main">
								<view class="time-title">练习时间</view>
								<view class="time-content">{{formatTime(trainStart)}}~{{formatTime(trainEnd)}}</view>
							</view>
							<view class="timeicon" style="">
								<image style="width: 90rpx;height: 90rpx;" src="https://baxztech.com/bian_admin_api/public/bianmp/test/tIcon1.png"></image>
							</view>
						</view>
						
						<view class="meditation-time" style="padding: 20px 16px;align-items: center;">
							<view class="time-main">
								<view class="time-title" style="padding: 4px 12px;">持续时长</view>
								<view class="time-content">{{trainMin}}分{{trainSec}}秒</view>
							</view>
							<view class="timeicon" style="">
								<image style="width: 90rpx;height: 90rpx;" src="https://baxztech.com/bian_admin_api/public/bianmp/test/tIcon2.png"></image>
							</view>
						</view>
<!-- 						<view class="keep-time">
							<view class="time-main">
								<view class="time-title">持续时长</view>
								<view class="time-content">{{trainMin}}<span>分</span>{{trainSec}}<span>秒</span></view>
							</view>
						</view> -->
					</view>
					<view class="index-box">
						<!-- <view class="index-title t-a">心情状态</view> -->
						<view class=""
							style="background-color: #fff;justify-content: start;align-items: center;display: flex;">
							<image class="iconImg" src="@/static/images/emoIcon.png"></image>
							<view class="index-title">心情指数</view>
						</view>
						<view class="contrast-box">
							<view class="contrast-main">
								<view class="pre">
									<view class="pre-num" v-if="emotionPreMean">
										{{emotionPreMean}}<span>{{textFilter('emotion',emotionPreMean)}}</span></view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="pre-title" style="color: #FF4D31;">练习前</view>
								</view>
								<view class="next">
									<view class="next-num" v-if="emotionNextMean">
										{{emotionNextMean}}<span>{{textFilter('emotion',emotionNextMean)}}</span></view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="next-title" style="color: #FF4D31;">练习后</view>
									<!-- <view class="no-cover" v-if="!coverTime&&emotionData.length!=0">时间过短</view> -->
								</view>
								<view class="contrast">
									<view class="contrast-num" v-if="emotionPreMean&&emotionNextMean"><span
											v-if="emotionNextMean>=emotionPreMean">+</span><span
											v-if="emotionNextMean<emotionPreMean">-</span>{{contrastEmotion}}%</view>
									<view class="no-cover" v-else-if="emotionPreMean">时间过短</view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="contrast-title" style="color: #FF4D31;">变化率</view>
								</view>
							</view>
						</view>
					</view>
					<view class="index-box">
						<!-- <view class="index-title t-b">精力状态</view> -->
						<view class=""
							style="background-color: #fff;justify-content: start;align-items: center;display: flex;">
							<image class="iconImg" src="@/static/images/tirIcon.png"></image>
							<view class="index-title">精力指数</view>
						</view>
						<view class="contrast-box">
							<view class="contrast-main">
								<view class="pre">
									<view class="pre-num" v-if="tiredPreMean">
										{{tiredPreMean}}<span>{{textFilter('tired',tiredPreMean)}}</span></view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="pre-title" style="color: #3FE0AC">练习前</view>
								</view>
								
								<view class="next">
									<view class="next-num" v-if="tiredNextMean">
										{{tiredNextMean}}<span>{{textFilter('emotion',tiredNextMean)}}</span></view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="next-title" style="color: #3FE0AC">练习后</view>
									<!-- <view class="no-cover" v-if="!coverTime&&emotionData.length!=0">时间过短</view> -->
								</view>
								<view class="contrast">
									<view class="contrast-num" v-if="tiredPreMean&&tiredNextMean"><span
											v-if="tiredNextMean>=tiredPreMean">+</span><span
											v-if="tiredNextMean<tiredPreMean">-</span>{{contrastTired}}%</view>
									<view class="no-cover" v-else-if="tiredPreMean">时间过短</view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="contrast-title" style="color: #3FE0AC">变化率</view>
								</view>
							</view>
						</view>
					</view>
					<view class="index-box">
						<!-- <view class="index-title t-c">压力状态</view> -->
						<view class=""
							style="background-color: #fff;justify-content: start;align-items: center;display: flex;">
							<image class="iconImg" src="@/static/images/strIcon.png"></image>
							<view class="index-title">压力指数</view>
						</view>
						<view class="contrast-box">
							<view class="contrast-main">
								<view class="pre">
									<view class="pre-num" v-if="stressPreMean">
										{{stressPreMean}}<span>{{textFilter('stress',stressPreMean)}}</span></view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="pre-title" style="color: #326EFF">练习前</view>
								</view>
								<view class="next">
									<view class="next-num" v-if="stressNextMean">
										{{stressNextMean}}<span>{{textFilter('emotion',stressNextMean)}}</span></view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="next-title" style="color: #326EFF">练习后</view>
								</view>
								<view class="contrast">
									<view class="contrast-num" v-if="stressPreMean&&stressNextMean"><span
											v-if="stressNextMean>=stressPreMean">+</span><span
											v-if="stressNextMean<stressPreMean">-</span>{{contrastStress}}%</view>
									<view class="no-cover" v-else-if="stressPreMean">时间过短</view>
									<view class="no-index" v-else>暂无数据</view>
									<view class="contrast-title" style="color: #326EFF">变化率</view>
								</view>
							</view>
						</view>
					</view>
					<view class="index-box">
						<u-button @click="toServece()" type="primary" text="返回"></u-button>
					</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				trainNum: '',
				trainName: '',
				trainTime: '',
				trainStart: '',
				trainEnd: '',
				trainMin: '',
				trainSec: '',
				emotionPreMean: '',
				emotionNextMean: '',
				stressPreMean: '',
				stressNextMean: '',
				tiredPreMean: '',
				tiredNextMean: '',
				contrastEmotion: '',
				contrastStress: '',
				contrastTired: '',
				showIndex:0,
				trainData:null
			};
		},
		onLoad(opt) {
			uni.$u.http.post('/client/train_info',{id:opt.id}).then(res=>{
				if (res.status == 200) {
					console.log(res);
					let trainData = res.data
					// .trainData[0]
					this.trainData = trainData;
					this.getTrainInfo();
				}
			}).catch(err=>{
				console.log(err);
				return this.$model("连接失败！")
			});
			
			if(opt.new){
				this.trainLn();
			}
			// let data = {"id":180,"phone":"18876003998","imei":"865339000955035","start_time":1724399297,"end_time":1724399863,"type":"train","name":"深度振奋引导"};
			// this.trainData = data;
			// this.getTrainInfo();
		},
		methods:{
			toServece() {
				uni.redirectTo({
					url:'/pagesA/pages/testMain/testRecord'
				})
			},
			formatTime(time) {
				return uni.$u.timeFormat(time * 1000,'hh:MM:ss')
			},
			trainLn() {
				uni.$u.http.post('/client/train_ln',{phone:this.member.phone}).then(res=>{
					if (res.status == 200) {
						this.trainNum = res.data.train_num
					}
				});
			},
			getTrainInfo() {
						let trainData = this.trainData;
						this.trainName = trainData.name;
						this.trainTime =  uni.$u.timeFormat(trainData.end_time * 1000,'yyyy-mm-dd hh:MM');
						this.trainEnd = trainData.end_time;
						this.trainStart = trainData.start_time;
						this.trainMin = parseInt((this.trainEnd - this.trainStart) / 60)
						this.trainSec = parseInt((this.trainEnd - this.trainStart) % 60)
						let trainStartNum = trainData.start_time*1000;
						let trainEndNum = trainData.end_time*1000;
						uni.$u.http.post('/client/train_report',{start_time:trainData.start_time, end_time:trainData.end_time,imei:trainData.imei}).then(res=>{
							if (res.status == 400) {
								this.$toast('暂无数据,佩戴设备后重试！');
							}
							if (res.status == 200) {
								if(!res.data.data.length){
									this.showIndex = 0;
									return;
								}
								if(res.data.data.length<3){
									this.showIndex = 1;
								}
								this.showIndex = 2;
								let emotionData = [];
								let stressData = [];
								let tiredData = [];
								let timeList = [];
								let stressPre = [];
								let stressNext = [];
								let stressMid = [];
								let emotionPre = [];
								let emotionMid = [];
								let emotionNext = [];
								let tiredPre = [];
								let tiredMid = [];
								let tiredNext = [];
								for (let i in res.data.data) {
									let item = res.data.data[i];
									item.tired = 100 - item.tired;
									let MS = uni.$u.timeFormat(item.date_time,'hh:MM')
									timeList.push(MS);
									item.time = MS;
									emotionData.push(item.emotion)
									tiredData.push(item.tired)
									stressData.push(item.stress)
									
									if (item.date_time < trainStartNum) {
										emotionPre.push(item)
										stressPre.push(item)
										tiredPre.push(item)
									}
									if (item.date_time > trainEndNum) {
										emotionNext.push(item)
										stressNext.push(item)
										tiredNext.push(item)
									}
									if (item.date_time >= trainStartNum&& item.date_time <= trainEndNum) {
										emotionMid.push(item)
										stressMid.push(item)
										tiredMid.push(item)
									}
								}
								let emoAlls = [emotionPre,emotionMid,emotionNext]
								let markAreaData = [];
								for(let i in emoAlls){
									if(emoAlls[i].length){
										let itemStyle = {};
										switch (i){
											case '0':
											itemStyle = {color:'rgba(254,248,239,0.4)'};
												let preline = [{
															name: '练习前',
															xAxis: emoAlls[i][0].time,
															itemStyle
														},
														{
															xAxis: emoAlls[i][emoAlls[i].length-1].time,
															itemStyle
														}
													];
												markAreaData.push(preline);
												break;
											case '1':
											itemStyle = {color:'rgba(237,237,255,0.4'};
											let midline = [{
														name: '练习中',
														xAxis: emoAlls[i][0].time,
														itemStyle
													},
													{
														xAxis: emoAlls[i][emoAlls[i].length-1].time,
														itemStyle
													}
												];
												markAreaData.push(midline);
												break;
											case '2':
											itemStyle = {color:'rgba(255,255,219,0.4)'};
											let endline = [{
														name: '练习后',
														xAxis: emoAlls[i][0].time,
														itemStyle
													},
													{
														xAxis: emoAlls[i][emoAlls[i].length-1].time,
														itemStyle
													}
												];
												markAreaData.push(endline);
												break;
										}
									}
								}
								this.$nextTick(() => {
									this.reportChart(emotionData,stressData,tiredData,markAreaData,timeList)
								})
								let emotionPreAll = 0;
								let emotionNextAll = 0;
								for (let item of emotionPre) {
									emotionPreAll += item.emotion;
								}
								for (let item of emotionNext) {
									emotionNextAll += item.emotion;
								}
								let emotionPreMean = parseInt(emotionPreAll / emotionPre.length)
								let emotionNextMean = parseInt(emotionNextAll / emotionNext.length)
								this.emotionPreMean = emotionPreMean;
								this.emotionNextMean = emotionNextMean;
								if (emotionNextMean >= emotionPreMean) {
									let dif = (emotionNextMean / emotionPreMean - 1) * 100
									this.contrastEmotion = parseInt(dif)
								}
								if (emotionNextMean < emotionPreMean) {
									let dif = (1 - emotionNextMean / emotionPreMean) * 100
									this.contrastEmotion = parseInt(dif)
								}
								let stressPreAll = 0;
								let stressNextAll = 0;
								for (let item of stressPre) {
									stressPreAll += item.stress;
								}
								for (let item of stressNext) {
									stressNextAll += item.stress;
								}
								let stressPreMean = parseInt(stressPreAll / stressPre.length)
								let stressNextMean = parseInt(stressNextAll / stressNext.length)
								this.stressPreMean = stressPreMean;
								this.stressNextMean = stressNextMean;
								if (stressNextMean >= stressPreMean) {
									let dif = (stressNextMean / stressPreMean - 1) * 100
									this.contrastStress = parseInt(dif)
								}
								if (stressNextMean < stressPreMean) {
									let dif = (1 - stressNextMean / stressPreMean) * 100
									this.contrastStress = parseInt(dif)
								}
								let tiredPreAll = 0;
								let tiredNextAll = 0;
								for (let item of tiredPre) {
									tiredPreAll += item.tired;
								}
								for (let item of tiredNext) {
									tiredNextAll += item.tired;
								}
								let tiredPreMean = parseInt(tiredPreAll / tiredPre.length)
								let tiredNextMean = parseInt(tiredNextAll / tiredNext.length)
								this.tiredPreMean = tiredPreMean;
								this.tiredNextMean = tiredNextMean;
								if (tiredNextMean >= tiredPreMean) {
									let dif = (tiredNextMean / tiredPreMean - 1) * 100
									this.contrastTired = parseInt(dif)
								}
								if (tiredNextMean < tiredPreMean) {
									let dif = (1 - tiredNextMean / tiredPreMean) * 100
									this.contrastTired = parseInt(dif)
								}
							}
						})
			},
			reportChart(emotionData,stressData,tiredData,markAreaData,timeList) {
				let option = {
					color: ['#ff0000', '#073bf5', '#0cf3ff'],
					legend: {
						itemHeight: 8,
						itemWidth: 16,
						left: 'center',
						bottom: 20,
						data: [{
								icon: 'roundRect',
								name: '情绪指数'
							},
							{
								icon: 'roundRect',
								name: '压力指数'
							},
							{
								icon: 'roundRect',
								name: '精力指数'
							},
						]
					},
					grid: {
						left: '13%',
						right: '14%',
						bottom: '20%',
						top: '13%',
					},
					xAxis: {
						type: 'category',
						data: timeList,
						boundaryGap: false,
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					yAxis: {
						splitLine: {
							show: true,
							lineStyle:{
								type: [5, 10],
								dashOffset: 5,
								color:'#ccc',
							}
						},
						axisLine: {
							show: false
						},
						type: 'value',
						max: 100,
			
					},
					series: [{
							name: '情绪指数',
							type: 'line',
							symbol: 'none',
							smooth: true,
							lineStyle: {
								color: '#ff0000'
							},
							data:emotionData,                        
							markArea: {
								data: markAreaData
							}
						},
						{
							name: '压力指数',
							type: 'line',
							symbol: 'none',
							smooth: true,
							lineStyle: {
								color: '#073bf5'
							},
							data: stressData,
						},
						{
							name: '精力指数',
							type: 'line',
							symbol: 'none',
							smooth: true,
							lineStyle: {
								color: '#0cf3ff'
							},
							data: tiredData,
						},
					]
				};
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(option);
				});
			},
			textFilter(type, num) {
				if (type == 'emotion') {
					if (num <= 49) {
						return '较差'
					}
					if (num >= 50 && num <= 69) {
						return '一般'
					}
					if (num >= 70 && num <= 100) {
						return '愉悦'
					}
				}
				if (type == 'tired') {
					if (num <= 49) {
						return '十分疲惫'
					}
					if (num >= 50 && num <= 69) {
						return '有点疲惫'
					}
					if (num >= 70 && num <= 100) {
						return '精力充沛'
					}
				}
				if (type == 'stress') {
					if (num <= 49) {
						return '放松'
					}
					if (num >= 50 && num <= 69) {
						return '稍有压力'
					}
					if (num >= 70 && num <= 100) {
						return '压力较大'
					}
				}
			
			},
		},
	}
</script>

<style lang="scss" scoped>
	.name-time {
		display: flex;
		justify-content: space-between;
	}
	.iconImg {
		width: 48rpx;
		height: 50rpx;
	}
	.index-title {
		margin-left: 5rpx;
		height: 48px;
		line-height: 48px;
		font-size: 30rpx;
		font-weight: 700;
		color: #333333;
	}
	.name {
		height: 30px;
		line-height: 30px;
		font-size: 34rpx;
		color: #2E2E2E;
		font-weight: 500;
	}
	
	.time {
		height: 30px;
		line-height: 30px;
		color: #AAAAAA;
		font-size: 24rpx;
		font-weight: 500;
	}
	
	.congratulation {
		margin-top: 10px;
		padding: 12px 16px;
		display: flex;
		justify-content: flex-start;
		border-radius: 16px;
		background-color: #fff;
		margin-bottom: 14px;
	}
	
	.congratulation-icn {
		height: 32px;
	}
	
	.congratulation-text {
		height: 32px;
		line-height: 32px;
		font-size: 15px;
		color: #2E2E2E;
		font-weight: 500;
		margin-left: 10px;
	}
	
	.chart-box {
		background-color: #fff;
		border-radius: 16px;
		border: 2rpx solid #ffffff99;
		box-shadow: 4rpx 8rpx 16rpx #a4aede2e;
		backdrop-filter: blur(10px);
		// height: 300px;
		margin-bottom: 14px;
	}
	
	#chart {
		height: 100%;
		width: 100%;
	}
	
	.no-data {
		height: 300px;
		line-height: 300px;
		text-align: center;
		background-color: rgba(114, 112, 112, 0.5);
		border-radius: 15px;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
	}
	
	.time-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 14px;
		border: 2rpx solid #ffffff99;
		box-shadow: 4rpx 8rpx 16rpx #a4aede2e;
		backdrop-filter: blur(10px);
	}
	.meditation-time{
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 16px;
		width: 265rpx;
	}
	.keep-time {
		background-color: #fff;
		border-radius: 16px;
		width: 48%;
	}
	
	// .time-main {
	// 	padding: 20px 16px;
	// }
	
	.time-title {
		padding: 4px 12px;
		text-align: center;
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		font-weight: 500;
		color: #ffffff;
		border-radius: 20rpx 40.1rpx 40.1rpx 0rpx;
		background: linear-gradient(90deg, #5da0fc 0%, #366fff 100%);
	}
	
	.time-content {
		height: 24px;
		line-height: 42rpx;
		padding-top: 8px;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.time-content span {
		font-size: 12px;
		font-weight: 500;
		margin: 0px 5px;
	}
	
	.index-box {
		background-color: #fff;
		border: 2rpx solid #ffffff99;
		box-shadow: 4rpx 8rpx 16rpx #a4aede2e;
		backdrop-filter: blur(10px);
		padding: 16px;
		border-radius: 16px;
		margin-bottom: 14px;
	}
	
	.t-a {
		color: #0000FF;
	}
	
	.t-b {
		color: #8D13FF;
	}
	
	.t-c {
		color: #F59A23;
	}
	
	// .index-title {
	// 	height: 20px;
	// 	line-height: 20px;
	// 	font-size: 16px;
	// 	font-weight: bolder;
	// 	padding-bottom: 16px;
	// }
	
	.contrast-box {
		padding: 10px 12px;
		border-radius: 6px;
		text-align: center;
	}
	
	.contrast-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	// .pre,
	// .next {
	// 	width: 30%;
	// }
	
	.pre-title,
	.next-title {
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		color: #606060;
		font-weight: 500;
	}
	
	.pre-num,
	.next-num {
		height: 24px;
		line-height: 24px;
		font-weight: bold;
		font-size: 20px;
		color: #2E2E2E;
	}
	
	.no-index {
		height: 24px;
		line-height: 24px;
		font-weight: bold;
		font-size: 12px;
		color: #969696;
	}
	
	.no-cover {
		height: 24px;
		line-height: 24px;
		font-weight: bold;
		font-size: 16px;
		color: #2E2E2E;
	}
	
	.pre-num span,
	.next-num span {
		font-size: 12px;
		color: #969696;
		margin-left: 4px;
	}
	
	.contrast {
		width: 25%;
	}
	
	.contrast-title {
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		color: #606060;
		font-weight: 500;
	}
	
	.contrast-num {
		height: 24px;
		line-height: 24px;
		font-weight: bold;
		font-size: 20px;
		color: #2E2E2E;
	}
	
	.increase,
	.reduce {
		width: 12%;
	}
	.back {
		height: 52px;
		border-radius: 26px;
		background-image: linear-gradient(to right, #00C8BD, #40D2DA);
		text-align: center;
		line-height: 52px;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
	}
</style>
